<!-- 过渡 -->
<template>
  <div class="menu-item">
    <a href="#">
      {{ title }}
    </a>
    <div class="sub-menu">
      <div v-for="(item, i) in items" :key="i" class="menu-item">
        <a :href="item.link">{{ item.title }}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "dropdown",
  props: ["title", "items"],
};
</script>

<style scoped>
.menu-item .sub-menu {
  position: absolute;
  background-color: #f6f8f7;
  /*   top:calc(100%+ 18px);
    left: 50%;*/
  transform: translateX(-50%);
  width: max-content;
  border-radius: 0px 0px 16px 16px;
  display: none; /* 初始不显示子菜单 */
  z-index: 1000; /* 确保子菜单在其他内容之上 */
}
.menu-item .sub-menu a {
  color: #222222;
}
.menu-item a {
  color: #00bc70;
  margin: 10px;
}
.menu-item:hover .sub-menu {
  display: block; /* 鼠标悬停时显示子菜单 */
}
</style>
